<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">车界网</view>
		</view>
		<view class="search_maxbox" :class="scrrol == true ? 'scrrolHeader_2' : ''">
			<view class="search_box">
				<view class="city_box" @tap="openAddres">
					<view class="city">{{pickerText}}</view>
					<view class="arrow iconfont icon-shixinjiantouxiangxia"></view>
				</view>
				<view class="search" :data-url="'/pages/index/search'" @click="gotopage">
					<view class="icon iconfont icon-sousuo"></view>
					<input type="text" value="" placeholder="搜索您要找的车" />
					<view class="menu">搜索</view>
				</view>
			</view>
		</view>
		<view class="clear_box"></view>
		<view class="clear_box02"></view>

		<view class="bg_box">
			<!-- <image class="bg01" src="../../static/bg05.png" mode="widthFix"></image> -->
			<view class="bg_content">
				<swiper class="swiper_box" :autoplay="true" :interval="3000" :duration="200" indicator-dots="true"
					indicator-color="rgba(0, 0, 0, .1)" indicator-active-color="#fff">
					<block v-for="(item, index) in banner" :key="index">
						<swiper-item style="height: 100%;" @click="gotopage_2(item.ad_link)">
							<view class="swiper-item" style="height: 100%;">
								<image :src="item.ad_code" mode="scaleToFill" ></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<!-- <view class="nav">
					<view class="menu">
						<view class="text">排序</view>
						<view class="icon iconfont icon-xiala"></view>
					</view>
					<view class="menu">
						<view class="text">品牌</view>
						<view class="icon iconfont icon-xiala"></view>
					</view>
					<view class="menu">
						<view class="text">价格</view>
						<view class="icon iconfont icon-xiala"></view>
					</view>
					<view class="menu">
						<view class="text">筛选</view>
						<view class="icon iconfont icon-shaixuan-xuanzhong"></view>
					</view>
				</view> -->

				<sl-filter :independence="true" ori="index" :codename="codename" :color="titleColor"
					:themeColor="themeColor" :menuList.sync="menuList" @reset="do_reset" @result="result"></sl-filter>

				<view class="records_maxbox" v-if="codename != '品牌' || searchs.price_str || screen_data[1].value || screen_data[2].value || screen_data[3].value || screen_data[4].value">
					<view class="records_box">
						<view class="records" v-if="codename != '品牌'">
							<view class="text">{{codename}}</view>
							<view class="close iconfont icon-guanbi" data-index="0" @tap="closeRecordsIndex"></view>
						</view>
						<block v-if="!screen_data[1].value">
							<view class="records" v-if="searchs.price_str">
								<view class="text">价格:{{searchs.price_str}}</view>
								<view class="close iconfont icon-guanbi" data-index="1" @tap="closeRecordsIndex"></view>
							</view>
						</block>
						<view class="records" v-if="screen_data[1].value">
							<view class="text">价格:{{screen_data[1].value}}万</view>
							<view class="close iconfont icon-guanbi" data-index="1" @tap="closeRecordsIndex"></view>
						</view>
						<view class="records" v-if="screen_data[2].value">
							<view class="text">车龄:{{screen_data[2].value}}</view>
							<view class="close iconfont icon-guanbi" data-index="2" @tap="closeRecordsIndex"></view>
						</view>
						<view class="records" v-if="screen_data[3].value">
							<view class="text">排量:{{screen_data[3].value}}L</view>
							<view class="close iconfont icon-guanbi" data-index="3" @tap="closeRecordsIndex"></view>
						</view>
						<view class="records" v-if="screen_data[4].value">
							<view class="text">里程{{screen_data[4].value}}</view>
							<view class="close iconfont icon-guanbi" data-index="4" @tap="closeRecordsIndex"></view>
						</view>
					</view>
					<view class="clear" @tap="clearRecords" v-if="codename != '品牌' || searchs.price_str || screen_data[1].value || screen_data[2].value || screen_data[3].value || screen_data[4].value">清除</view>
				</view>
				<!-- <scroll-view class="scroll_box" scroll-y="true" @scrolltolower="lower" > -->
				<block v-for="(item,index) in car">
					<view class="goods_list" :data-url="'/pages/goods/goods?id='+item.id" @click="gotopage">
						<view class="goods_img">
							<image :src="item.logo" mode="scaleToFill"></image>
						</view>
						<view class="goods_text">
							<view class="title">{{item.title}}</view>
							<view class="text">{{item.year}}上牌 / {{item.mileage}}万公里 / {{item.city}}</view>
							<view class="money_box">
								<view class="money">{{item.show_price}}万</view>
								<view class="rule" >更新日期：{{item.updated_at}}</view>
								<!-- <view class="money" v-if="is_vip == 0">*万</view> -->
								<!-- <view class="rule" >批发价 {{item.show_price}}万</view> -->
								<!-- <view class="rule" v-if="is_vip == 0">批发价 *万</view> -->
							</view>
						</view>
					</view>
				</block>
				<block v-if="empty_show">
					<view style="height: 10vh;padding-top: 5vw;text-align: center;">
						<u-empty text="没有更多了" mode="list">没有更多了</u-empty>
					</view>
				</block>
				<!-- </scroll-view> -->

			</view>
		</view>

		<view class="publish_box" @click="push">
			<view class="icon iconfont icon-fabucheyuan"></view>
			<view class="text">发布</view>
		</view>

		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor="#333"></simple-address>

	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	export default {
		components: {
			slFilter
		},
		data() {
			return {
				page: 1,
				scrrol: false,
				info: '',
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '全国',
				themeColor: '#FC5D20',
				titleColor: '#1E2128',
				filterResult: '',
				codename: '品牌',
				menuList: [{
						'title': '排序',
						'icon': '1',
						'key': 'sort',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'type': '1',
						'detailList': [{
								'title': '默认排序',
								'value': ''
							},
							{
								'title': '最新上架',
								'value': '最新上架'
							},
							{
								'title': '里程最少',
								'value': '里程最少'
							},
							{
								'title': '价格最低',
								'value': '价格最低'
							},
							{
								'title': '价格最高',
								'value': '价格最高'
							},
							{
								'title': '车龄最短',
								'value': '车龄最短'
							}
						]
					},
					{
						'title': '品牌',
						'key': 'single',
						'isMutiple': false,
						'detailTitle': '请选择（品牌）',
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'type': '2',
						'detailList': [{
								'title': '品牌',
								'value': 0
							},

						]
					},
					{
						'title': '价格',
						'key': 'salary',
						'isMutiple': false,
						'type': '3',
						'detailList': [{
								'title': '不限',
								'value': ''
							},
							{
								'title': '0~3万',
								'value': '0~30000'
							},
							{
								'title': '3万~10万',
								'value': '30000~100000'
							},
							{
								'title': '10万~15万',
								'value': '100000~150000'
							},
							{
								'title': '15万~25万',
								'value': '150000~250000'
							},
							{
								'title': '25万~35万',
								'value': '250000~350000'
							},
							{
								'title': '35万~50万',
								'value': '350000~500000'
							},
							{
								'title': '50万以上',
								'value': '500000~5000000'
							}
						]

					},
					{
						'title': '筛选',
						'key': 'single',
						'isMutiple': false,
						'detailTitle': '请选择（筛选）',
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'type': '4',
						'detailList': [{
							'title': '筛选',
							'value': ''
						}, ]

					},

				],
				searchs: {
					brand_id: 0,
					price_str: '',
					defaul_sort: '',
					ctype_id: 0,
				},
				prov: '',
				city: '',
				area: '',
				banner: [],
				screen_data: [],
				car: [],
				is_vip: 0,
				empty_show: 0,
				is_load: 0,
				plat_phone: '',
			}
		},
		onLoad(opt) {
			this.loadData();
			this.set_pid(opt);
			uni.$on('get_brand', (data) => {
				console.log(data)
				if (data == 0) {
					this.searchs.brand_id = 0;
					this.menuList[1].detailList[0].title = '品牌';
					this.codename = '品牌';
				} else {
					this.searchs.brand_id = data.id;
					this.codename = data.name;
					this.menuList[1].detailList[0].title = data.name;
					console.log(data.name);
					// this.$set(this.menuList[1].detailList[0],'title',data.name);
				}
				this.page = 1;
				this.pageinit();
				this.is_load = 1;
			});
			uni.$on('index_screen', (data) => {
				this.screen_data = data;
				console.log(data);
				this.page = 1;
				this.pageinit();
				this.is_load = 1;
			});
			if (this.is_load == 0) {
				this.loadCar();
			}
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			clearRecords(){
				let that = this;
				that.codename = '品牌';
				console.log(that.screen_data)
				that.searchs.price_str = '';
				/* that.screen_data[1].value = '';
				that.screen_data[2].value = '';
				that.screen_data[3].value = '';
				that.screen_data[4].value = ''; */
				that.screen_data = [];
				that.searchs.brand_id = 0;
				that.pickerText = '请选择';
				that.prov = '';
				that.city = '';
				that.area = '';
				that.pageinit();
			},
			closeRecordsIndex(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				if (index == 0) {
					that.codename = '品牌';
					that.searchs.brand_id = 0;
				} else if (index == 1) {
					that.searchs.price_str = '';
					that.screen_data[1].key = 0;
					that.screen_data[1].value = '';
				} else if (index == 2) {
					that.screen_data[2].key = 0;
					that.screen_data[2].value = '';
				} else if (index == 3) {
					that.screen_data[3].key = 0;
					that.screen_data[3].value = '';
				} else if (index == 4) {
					that.screen_data[4].key = 0;
					that.screen_data[4].value = '';
				}
				that.pageinit();
			},
			do_reset(key) {
				if (key == 'sort') {
					this.searchs.defaul_sort = '';
				} else if (key == 'single') {
					this.searchs.ctype_id = 0;
				} else if (key == 'salary') {
					this.searchs.price_str = 0;
				}
			},
			result(val) {
				let _res = JSON.parse(JSON.stringify(this.menuList));
				_res[val.f_index].defaultSelectedIndex = val.index;
				this.menuList = _res;
				//console.log('filter_result:' + JSON.stringify(val));
				let sort = val?.sort;
				let single = val?.single;
				let salary = val?.salary;
				let arr = [sort, single, salary];
				for (let x in arr) {
					if (arr[x] !== undefined) {
						switch (parseInt(x)) {
							case 0:
								this.searchs.defaul_sort = arr[x];
								break;
							case 1:
								this.searchs.ctype_id = arr[x];
								break;
							case 2:
								this.searchs.price_str = JSON.stringify(arr[x]);
								console.log(this.searchs.price_str)
								break;
						}
						break;
					}
				}
				setTimeout(() => {
					this.pageinit();
				}, 100)
				//this.filterResult = JSON.stringify(val, null, 2)
			},
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1];
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				let that = this;
				let pickerText = e.label.split('-');
				that.prov = pickerText[0];
				that.city = pickerText[1];
				that.area = pickerText[2];
				if (pickerText[1] == '市辖区') {
					that.city = pickerText[0];
					that.area = pickerText[1];
				}
				that.pickerText = that.city;
				that.pageinit();
			},
			loadData() {
				let that = this;
				that.Net._get('index/app_init_data', {}, res => {
					if (res.code == 1) {
						that.banner = res.data.appInfo.ad_list;
						that.is_vip = res.data.is_vip;
						that.plat_phone = res.data.plat_phone;
					}
				});
			},
			loadCar() {
				let that = this;
				if (that.load_type == 'loading' || that.load_type == 'no_more') {
					return;
				}
				let param = {
					searchs: JSON.stringify(that.searchs),
					screens: JSON.stringify(that.screen_data),
					page: that.page,
					prov: that.prov,
					city: that.city
				};
				that.Net._get('index/index_load', param, res => {
					if (res.code == 1) {
						that.car = res.data;
						that.load_type = 'more';
						if (that.car.length == 0) {
							that.empty_show = 1;
						}
					} else {
						that.load_type = 'no_more';
					}
				});
			},
			pageinit() {
				this.page = 1;
				this.list = [];
				this.load_type = 'more';
				this.empty_show = 0;
				this.loadCar();
			},
			set_pid(opt) {
				if (opt?.q) {
					let qr_url = decodeURIComponent(opt.q) || '';
					if (qr_url != '') {
						let pid = qr_url.split('=')[1];
						this.pid = pid || 0;
					}
				} else {
					if (opt.pid) {
						this.pid = opt.pid ?? 0;
					} else if (opt.scene) {
						let args = this.get_args(opt.scene);
						this.pid = args.pid ?? 0;
					}
				}
				this.$nextTick(() => {
					// 这个函数会在 DOM 更新后执行  
					setTimeout(() => {
						if (this.pid == 0) {
							this.pid = uni.getStorageSync('pid');
						}
					}, 200);
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			gotopage_2(e){
				console.log(e)
				uni.switchTab({
					url: e
				});
			},
			push() {
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				uni.navigateTo({
					url: '/pages/service/publish01'
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			let that = this;
			setTimeout(function() {
				uni.stopPullDownRefresh();
				that.pageinit();
			}, 500);
		},
		onReachBottom() {
			var that = this;
			that.page++;
			let param = {
				searchs: JSON.stringify(that.searchs),
				screens: JSON.stringify(that.screen_data),
				page: that.page,
				city: that.city
			};
			that.Net._get('index/index_load', param, res => {
				if (res.code == 1) {
					//console.log(res)
					if (res.data.length == 0) {
						uni.showToast({
							title: '没有更多了',
							duration: 2000,
							icon: 'none'
						});
						that.empty_show = 1;
					} else {
						that.car = that.car.concat(res.data); //将数据拼接在一起
					}
				} else if (res.code == 0) {
					that.Msg.Success(res.msg, res => {});
				}
			});
		},
	}
</script>

<style>
	.header {
		/* background-color: transparent !important; */
	}

	.header .text {
		/* background-color: transparent !important; */
		color: #fff !important;
	}

	.scrrolHeader_2 {
		background-color: #fff !important;
	}

	.clear_box02 {
		width: 100%;
		height: calc(12vw + var(--status-bar-height));
	}

	.search_maxbox {
		width: 100%;
		padding: 3vw 4%;
		position: fixed;
		left: 0;
		top: calc(13.4vw + var(--status-bar-height));
		z-index: 9999;
	}

	.search_box {
		width: 100%;
		border-radius: 2vw;
		border: 1px solid #FC5D20;
		display: flex;
		align-items: center;
		height: 12vw;
	}

	.search_box .city_box {
		display: flex;
		align-items: center;
		padding: 0 2vw;
		border-right: 1px solid #E8E8F0;
		margin-right: 2vw;
	}

	.search_box .city_box .city {
		font-size: 3.8vw;
		color: #979AA9;
		margin-right: 1vw;
	}

	.search_box .city_box .arrow {
		font-size: 3vw;
		color: #979AA9;
	}

	.search_box .search {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.search_box .search .icon {
		font-size: 4vw;
		color: #979AA9;
		margin-right: 2vw;
	}

	.search_box .search input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
	}

	.search_box .search .menu {
		font-size: 4vw;
		height: 9vw;
		width: 16vw;
		color: #fff;
		background-color: #FE811E;
		border-radius: 2vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 1.5vw;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: 0;
		z-index: 98;
	}

	.swiper_box {
		width: 100%;
		height: 34vw;
	}

	.swiper_box image {
		width: 100%;
	}

	.nav {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 5vw 0;
	}

	.nav .menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav .menu .text {
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
	}

	.nav .menu .icon {
		font-size: 3vw;
		color: #E6E6E6;
	}

	.scroll_box {
		width: 100%;
		height: 58vh;
	}

	.goods_list {
		width: 100%;
		display: flex;
		margin-bottom: 4%;
	}

	.goods_list .goods_img {
		width: 32vw;
		height: 25vw;
		margin-right: 3vw;
	}

	.goods_list .goods_img image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}

	.goods_list .goods_text {
		flex: 1;
	}

	.goods_list .goods_text .title {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods_list .goods_text .text {
		font-size: 3.5vw;
		color: #999999;
		margin-top: 2vw;
	}

	.goods_list .goods_text .money_box {
		margin-top: 1vw;
		display: flex;
		align-items: center;
	}

	.goods_list .goods_text .money_box .money {
		font-size: 4.5vw;
		font-weight: bold;
		color: #FF6826;
		flex: 1;
	}

	.goods_list .goods_text .money_box .rule {
		font-size: 3.1vw;
		color: #999999;
		/* flex: 1; */
		text-align: right;
	}

	.publish_box {
		width: 24vw;
		height: 11vw;
		border-radius: 11vw;
		padding: 0 1.5vw;
		background: linear-gradient(to right, #FE9229, #FF4F27);
		display: flex;
		align-items: center;
		position: fixed;
		right: 4%;
		bottom: 10vh;
		z-index: 98;
	}

	.publish_box .icon {
		width: 8vw;
		height: 8vw;
		border-radius: 50%;
		background-color: #fff;
		font-size: 4vw;
		color: #FE9129;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.publish_box .text {
		flex: 1;
		font-size: 3.5vw;
		color: #fff;
		font-weight: bold;
		text-align: center;
	}
	
	.records_maxbox{
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
	}
	
	.records_maxbox .clear{
		margin: 0 3vw;
		font-size: 3.5vw;
		color: #666;
	}

	.records_box {
		flex: 1;
		padding: 2vw 3vw;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		background-color: #fff;
	}

	.records_box::after {
		flex: auto;
		content: '';
	}

	.records_box .records {
		padding: 1vw 2vw;
		display: flex;
		align-items: center;
		border: 1px solid #999;
		border-radius: 1vw;
		margin-right: 3vw;
		margin-bottom: 2vw;
	}

	.records_box .records .text {
		font-size: 3.2vw;
		color: #666;
		margin-right: 1vw;
	}

	.records_box .records .close {
		font-size: 3vw;
		color: #666;
	}
</style>